解决Vue中Element resetFields()重置表单不生效的问题（含Cannot read property ‘resetFields‘ of undefined问题解决）

2024-07-03 15:16| 来源: 网络整理| 查看: 265

问题背景：在已经遵照Element官网给出的 resetFields 使用方法情况下，resetFields 方法仍无法生效首先先来梳理一下Element官方文档中给出的 resetFields 方法的使用条件：

也就是说，想要使用 resetFields 需要满足：给el-form-item添加 prop 属性为了重置表单需要添加 ref 属性，ref属性需要与$ref['form']中名称一致原始代码：

按如上代码，我既添加了ref又添加了prop而且我的对话框模块的代码并没有进行复用，如果 resetFields() 方法生效后应该会将表单中的值重置为图三所设置的初始值，但是结果并没有重置...（我emo了....）

解决方法：

于是我思来想去决定把这个监听事件换个地方绑定！

我将这个监听事件绑定到了准备开始弹出弹框的地方：

虽然表单可以实现重置了，不过浏览器弹出了以下错误：

Cannot read property ‘resetFields‘ of undefined

分析（一定要接着看更新的方法！）：

undefined 表示一个变量未定义或未赋值的初始状态值，我认为弹出这个错误大概是因为第一次点击弹框的时候弹框内本来就是初始值，并不需要 reset，所以可以在使用 resetFields 之前增加一个判断条件，代码如下：

最后，果然不报错了！！而且重置表单也可以正常生效了！！！

所以如果有和我情况一致的uu也可以试试我这种方法噢

更新上次分析的 resetFields() 方法失效的原因不正确，真正让它 undefined 原因应该是在 mounted 加载完后，这个隐藏的对话框并没有被渲染到DOM树中，所以点击它的时候 $refs 获取不到dom节点，导致结果undefined，破案了破案了解决方法：

1.依旧可以像上面一样换个地方绑定并添加一个判断条件，

2.也可以使用 nextTick() 方法：

简单理解 nextTick() 就是当数据更新了，在dom中渲染后，自动执行该函数

【本文地址】

今日新闻